<template>
    <div id="spacecp">
      <header1></header1>
      <div class="container layout">
        <div class="row">
          <div class="col-md-12 no-padding user-profile" style="background-color:#fff;color:#000">
            <!---->
            <div class="content">
              <!-- <div class="col-md-3">
                <div class="common-content content-tabs">
                  <div class="profile-tabs">
                    <span class="tab-title active"><a href="#basic">基本信息</a></span>
                    <span class="tab-title"><a href="#pwd">账号密码</a></span>
                    <span class="tab-title">站内信</span>
                    <span class="tab-title">邀请码</span>
                  </div>
                </div>
              </div> -->
  
              <ul class="nav nav-tabs" role="tablist">
  
                  <li role="presentation" class="active">
                      <a href="#labs" aria-controls="labs" role="tab" data-toggle="tab">基本信息</a>
                  </li>
  
                  <!-- <li role="presentation">
                      <a href="#comments" class="stat-event" aria-controls="comments" role="tab"
                          data-stat="course_comment" data-toggle="tab">账号密码</a>
                  </li> -->
                  <li role="presentation">
                      <a href="#reports" class="stat-event" data-stat="course_report" aria-controls="reports"
                          role="tab" data-toggle="tab">站内信</a>
                  </li>
                  <li role="presentation">
                      <a href="#questions" class="stat-event" data-stat="course_question"
                          aria-controls="questions" role="tab" data-toggle="tab">邀请码</a>
                  </li>
              </ul>
  
              <div class="tab-content">
                <!-- 基本信息 -->
                <div role="tabpanel" class="tab-pane active" id="labs">
                  <div class="common-content">
                    <!-- <div class="row-wrapper">
                      <div class="user-avatar">
                        <div id="user-avatar" role="group" class="form-row form-group">
                          <label
                            id="user-avatar__BV_label_"
                            for="avatar"
                            class="col-sm-4 col-form-label"
                          >头像</label>
                          <div class="col-sm-8">
                            <div class="img-container inline-block">
                              <img
                                src="http://www.gentlener.com:8888/group1\M00/00/01/rB_pcV2fJRSAcUiPAAMOCGIjajY370.jpg"
                                width="100"
                                height="100"
                              />
                              <div class="custom-file b-form-file upload-image">
                                <input type="file" class="custom-file-input" />
                                <label data-browse="Browse" class="custom-file-label">No file chosen</label>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div> -->
                    <div class="row-wrapper">
                      <div class="user-nickname">
                        <div id="user-nickname" role="group" class="form-row form-group">
                          <label
                            id="user-nickname__BV_label_"
                            for="nickname"
                            class="col-sm-2 col-form-label"
                          >昵称</label>
                          <div class="col-sm-10">
                            <input
                              style="width:160px"
                      
                              type="text"
                              value
                              class="form-control"
                              v-model="username"
                            />
                          </div>
                          <label
                            id="user-nickname__BV_label_"
                            for="nickname"
                            class="col-sm-2 col-form-label"
                          >原密码</label>
                          <div class="col-sm-10">
                            <input
                              style="width:160px"
                          
                              type="password"
                              value
                              class="form-control"
                              v-model="password"
                            />
                          </div>
                          <label
                            id="user-nickname__BV_label_"
                            for="nickname"
                            class="col-sm-2 col-form-label"
                          >新密码</label>
                          <div class="col-sm-10">
                            <input
                              style="width:160px"
                          
                              type="password"
                              value
                              class="form-control"
                              v-model="newpassword"
                            />
                          </div>
                          <label
                            id="user-nickname__BV_label_"
                            for="nickname"
                            class="col-sm-2 col-form-label"
                          >重复新密码</label>
                          <div class="col-sm-10">
                            <input
                              style="width:160px"
                          
                              type="password"
                              value
                              class="form-control"
                              v-model="newpassword1"
                            />
                            
                          </div>
                                                  
                        </div>
                      </div>
                    </div>
                    
                    <div class="row-wrapper form-row">
                      <div class="col-offset-2">
                        <button class="btn btn-primary" @click="sub">保存</button>
                      </div>
                    </div>
                  </div>
                </div>
  
          
                <!-- 站内信 -->
                <div role="tabpanel" class="tab-pane" id="reports">
                  <div class="common-content">
  
                    <div class="row-wrapper">
                      <div  v-for="i in messages">
                        <router-link :to="{path:'/mes_content',query:{id:i.id}}">{{i.title}}</router-link>
                      
                        <span v-if="i.status==0">状态：未读</span>
                        <span v-else>状态：已读</span>
                        
                        
                      </div>
                      
                    </div>
                    
                  </div>
                </div>
  
                <!-- 邀请码 -->
                <div role="tabpanel" class="tab-pane" id="questions">
                    <div class="common-content">
    
                      <div class="row-wrapper">
                        <span>我的邀请码：{{yao}}</span> <br>
                        <button v-show='yao==""'  @click="yaoqing">点击获取邀请码</button>
                      </div>
                      
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modals"></div>
      </div>
      <div></div>
      <div class="risk-validation"></div>
      <footer1></footer1>
    </div>
  </template>
  <script>
  import header1 from "./header";
  import footer1 from "./footer";
  import {} from "../api/api.js";
  export default {
    name: "aa",
    data() {
      return {
        user_id:localStorage.getItem("user_id"),
        username:'',
        password:'',
        newpassword:'',
        newpassword1:'',
        messages:[],
        yao:'',
        status:'未读',
      };
    },
    components: {
      header1: header1,
      footer1: footer1
    },
    mounted(){
      this.getmes()
      this.axios({
        url:'/api/yaoqing/?user_id='+this.user_id,
        method:'get',
      }).then(res => {
        if (res.data.code == 200) {
          this.yao = res.data.yao;
        }
      });
    },
    methods: {
      sub: function() {
        
        this.axios({
          url: "/api/spacecp/",
          method: "post",
          data: {
            username: this.username,
            password: this.password,
            newpassword1: this.newpassword1,
            newpassword: this.newpassword,
            user_id: this.user_id
          }
        }).then(res => {
          alert(res.data.mes);
        });
      },
      yaoqing:function(){
       
        this.axios({
            url:'/api/yaoqing/',
            method:'post',
            data:{
                user_id:this.user_id
            }
        }).then(res=>{
            this.yao = res.data.yao
        })
      },
      getmes:function(){
        var id = localStorage.getItem("user_id");
        this.axios({
          url:"/api/usermessage/?id="+id
        }).then((res)=>{
          if(res.data.code==200){
            this.messages = res.data.messages
          }
        })
        }
    }
  };
  </script>
      
      
  <style>
  .user-profile .profile-container {
    padding-bottom: 20px;
  }
  .user-profile .profile-tabs span {
    display: block;
    margin: 30px auto;
    padding: 10px 25px;
    width: 118px;
    height: 40px;
    line-height: 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
      color: #000;
  }
  .user-profile .profile-tabs span.active,
  .user-profile .profile-tabs span:hover {
    background: #efefef;
  }
  .common-content {
    margin-bottom: 10px;
    padding: 30px 30px 20px;
    border: 1px solid #eee;
    background: #fff;
  }
  
  .user-profile .profile-container .common-content {
    height: 100%;
    min-height: 700px;
    overflow:hidden;
    width:100%
  }
  .user-avatar .img-container[data-v-a7105100] {
      display: inline-block;
      position: relative;
      width: 125px;
      height: 125px;
      vertical-align: middle;
      overflow: hidden;
      cursor: pointer;
  }
  .user-avatar .img-container .upload-image {
    display: none;
  }
  
  .user-nickname {
    position: relative;
    display: inline-block;
  }
  .user-email,.user-password{
    margin-bottom:20px
  }
  .user-email span[data-v-21d814b2]:first-child{
    width: 92px;
    display: inline-block;
  }
  .user-password .display-password span[data-v-19850dd5]:first-child{
    width: 92px;
    display: inline-block;
  }
  .user-email  span:nth-child(2){
        width: 200px;
        display: inline-block;
  }
  .user-password .display-password span:nth-child(2){
        width: 200px;
        display: inline-block;
  }
  .user-email span:nth-child(3){
    color: #4990e2;
      cursor: pointer;
  }
  .user-password span:nth-child(3){
    color: #4990e2;
      cursor: pointer;
  }
  </style>